<template>
  <div>
    <div
      style="display:flex;justify-content:center;align-items:center;background-color: white;width: 100%;height:200px;margin-top: 60px"
      v-if="detailLoading">加载中...
    </div>
    <div
      style="display:flex;justify-content:center;align-items:center;background-color: white;width: 100%;height:200px;margin-top: 60px"
      v-if="hasError">发生异常
    </div>
    <div v-if="!detailLoading&&!hasError" style="margin-top: 60px">
      <!--      <van-button style="position: absolute;left: 20px;top:70px" @click="goBack">返回</van-button>-->
      <div style="background-color: white;padding: 20px 0">
        <div class="title">{{movie.title}}</div>
        <div style="display: flex;justify-content: center">
          <img style="width:75%;height:410px" :src="movie.imgUrl" :onerror="errorimg"/>
        </div>
      </div>

      <div style="margin-top: 10px;background-color: white;padding:20px">
        <div>
          <div style="font-weight: bold">资源</div>
          <div style="display:flex;align-items: center">
            <div class="pan-label">提取码:</div>
            <div style="margin-left: 10px">{{movie.urlKey}}</div>
            <div style="margin-left: 20px">复制并前往网盘:</div>
            <el-button style="margin-left: 10px" type="button"
                       v-clipboard:copy="movie.urlKey"
                       v-clipboard:success="onCopy">百度网盘
            </el-button>
          </div>

          <div v-if="movie.urlBackup" style="display:flex;align-items: center;margin-top: 5px">
            <div class="pan-label">提取码:</div>
            <div style="margin-left: 10px">{{movie.urlBackupKey}}</div>
            <div style="margin-left: 20px">复制并前往网盘:</div>
            <el-button style="margin-left: 10px" type="button"
                       v-clipboard:copy="movie.urlBackupKey"
                       v-clipboard:success="onCopyBackup">百度网盘
            </el-button>
          </div>


          <div style="display: flex;align-items: center;justify-content: center;margin-top: 15px">
            <div @click="collect" style="width:38px;height:38px;border:1px solid #dedede;border-radius: 50%;display: flex;justify-content: center;align-items: center;margin-right: 20px">
              <img v-if="collected" style="width:20px;height:20px" src="@/assets/collected.png"/>
              <img v-else style="width:20px;height:20px" src="@/assets/notCollect.png"/>
            </div>
            <el-button @click="report">链接失效反馈</el-button>
          </div>
        </div>
      </div>

      <div style="margin-top: 10px;background-color: white;padding:20px">
        <div style="font-weight: bold;margin-bottom: 10px">信息</div>
        <div class="txt-item">
          <div class="label">导演：</div>
          <div class="value">{{movie.director}}</div>
        </div>
        <div class="txt-item">
          <div class="label">编剧：</div>
          <div class="value">{{movie.writer}}</div>
        </div>
        <div class="txt-item">
          <div class="label">主演：</div>
          <div class="value">{{movie.starring}}</div>
        </div>
        <div class="txt-item">
          <div class="label">类型：</div>
          <div class="value">{{movie.type}}</div>
        </div>
        <div class="txt-item">
          <div class="label">语言：</div>
          <div class="value">{{movie.language}}</div>
        </div>
        <div class="txt-item">
          <div class="label">地区：</div>
          <div class="value">{{movie.area}}</div>
        </div>
        <div class="txt-item">
          <div class="label">片长：</div>
          <div class="value">{{movie.timeSpan}}</div>
        </div>
        <div class="txt-item">
          <div class="label">上映时间：</div>
          <div class="value">{{movie.releaseTime}}</div>
        </div>
        <div class="txt-item">
          <div class="label">上传时间：</div>
          <div class="value">{{movie.createTime | dateFilter}}</div>
        </div>
        <div class="txt-item">
          <div class="label">豆瓣评分：</div>
          <div class="value">{{movie.scoreDouban}}</div>
        </div>
      </div>

      <div style="background-color: white;margin-top: 20px;padding:20px">
        <div class="movie-imgs">
          <div style="font-weight: bold;margin-bottom: 10px">截图</div>
          <div v-if="movieImgs.length>0" class="img-value">
            <img class="img-item" v-for="item in movieImgs" :src="item"/>
          </div>
          <div class="empty" v-else>暂缺</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import {getStore} from "@/utils/storage";
  import {getById, report, checkCollection} from "@/api/movie";
  import {getComments, saveComment} from "@/api/comment";
  import {parseTime} from "@/utils";
  import Pagination from '@/components/Pagination'
  import Bus from '@/utils/bus';
  import {collect,cancelCollect} from "@/api/movieCollection"
  export default {
    name: 'MovieDetail',
    components: {Pagination},
    computed: {
      avatar() {
        return getStore('avatar')
      },
    },
    data() {
      return {
        collected: false,
        errorimg: 'this.src="' + require('@/assets/err_img.png') + '"',
        id: null,
        hasError: false,
        detailLoading: true,
        movie: {},
        movieImgs: [],
        comments: {},
        query: {
          curPage: 1,
          pageSize: 5
        },
        total: 0,
        word: ''
      }
    },
    filters: {
      dateFilter(time) {
        console.log("time", time)
        return parseTime(time, '{y}-{m}-{d}')
      },
      timeFilter(time) {
        return parseTime(time, '{y}-{m}-{d} {h}:{i}');
      }
    },
    created() {

      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      this.id = this.$route.params && this.$route.params.id
      this.getMovie();
      // this.getMovieImgs();
      this.getComments();
    },
    methods: {
      collect(){
        if(this.avatar){
          //登陆了
          if(this.collected){
            //取消收藏
            cancelCollect(this.movie.id).then(r1=>{
              Bus.$emit("refresh");
              this.$toast("取消收藏成功");
              this.collected = false;
            }).catch(err=>{
              this.$toast("发生异常，请重试");
            })
          }else{
            //收藏
            collect(this.movie.id).then(r1=>{
              Bus.$emit("refresh");
              this.$toast("收藏成功");
              this.collected = true;
            }).catch(err=>{
              this.$toast("发生异常，请重试");
            })
          }
        }else{
          //没登陆
          Bus.$emit('showLogin');
        }

      },
      getMovie() {
        this.detailLoading = true;
        getById(this.id).then(r1 => {
          this.detailLoading = false;
          this.movie = r1.data
          //处理图片
          this.handleImgs(this.movie.imgUrls);
        }).catch(err => {
          this.detailLoading = false;
          this.hasError = true;
          console.log("err:", err)
        });

        checkCollection(this.id).then(r1=>{
          this.collected = r1.data;
        }).catch(err=>{
          console.log("检查收藏出错",err)
          this.collected = false;
        })

      },

      handleImgs(imgUrls) {
        if (!imgUrls || imgUrls === '') {
          return;
        }
        let arr = imgUrls.split(";");
        for (var i = 0; i < arr.length - 1; i++) {
          this.movieImgs.push(arr[i])
        }
      },

      getComments() {
        this.query.movieId = this.id;
        getComments(this.query).then(r1 => {
          console.log("getComments", r1)
          this.comments = r1.data.records;
          this.total = r1.data.total;
        }).catch(err => {
          console.log("失败了", err)
        });
      },

      report() {
        report(this.id).then(r1 => {
          this.$message.success("发送成功，感谢您的帮助")
        })
      },

      saveComment() {
        console.log("this.word", this.word)
        if (this.word.length > 100) {
          this.$message.error('字数限制100以内')
          return;
        }
        let params = {
          movieId: this.id,
          message: this.word
        }
        saveComment(params).then(r1 => {
          this.getComments();
          this.word = '';
        }).catch(err => {
          console.log("留言失败", err);
        })
      },

      onCopy: function (e) {
        this.$message.success("已复制")
        this.toBaidu();
        // alert('You just copied: ' + e.text)
      },

      onCopyBackup: function (e) {
        this.$message.success("已复制")
        this.toBaiduBackup();
        // alert('You just copied: ' + e.text)
      },
      toBaidu() {
        window.open(this.movie.url, "_blank");
      },
      toBaiduBackup() {
        window.open(this.movie.urlBackup, "_blank");
      },
      goBack() {
        this.$router.go(-1);
      }
    }
  }
</script>





<style scoped>
  .txt-item {
    display: flex;
  }

  .label {
    width: 25%;;
    text-align: right;

  }

  .value {
    width: 75%;
  }

  .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 18px;
    font-weight: bold;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .img-item{
    width:100%;
  }
</style>
